<template>
  <view class="stats-container">
    <view class="header">
      <view class="title">我的战绩</view>
    </view>

    <view class="stats-content">
      <!-- 统计卡片 -->
      <view class="stats-grid">
        <view class="stat-card">
          <view class="stat-value">{{ totalGames }}</view>
          <view class="stat-label">总场次</view>
        </view>
        <view class="stat-card">
          <view class="stat-value">{{ winGames }}</view>
          <view class="stat-label">胜场</view>
        </view>
        <view class="stat-card">
          <view class="stat-value">{{ totalMarbles }}</view>
          <view class="stat-label">弹珠</view>
        </view>
        <view class="stat-card">
          <view class="stat-value">{{ highestScore }}</view>
          <view class="stat-label">最高分</view>
        </view>
      </view>

      <!-- 对战记录 -->
      <view class="section">
        <view class="section-title">对战记录</view>
        <view class="record-list">
          <view 
            v-for="(record, index) in battleRecords" 
            :key="index"
            class="record-item"
          >
            <view class="record-header">
              <text class="record-time">{{ formatTime(record.time) }}</text>
              <text class="record-result" :class="{'win': record.win, 'lose': !record.win}">
                {{ record.win ? '胜利' : '失败' }}
              </text>
            </view>
            <view class="record-details">
              <text v-if="record.marblesWon > 0">获得弹珠: {{ record.marblesWon }}颗 ({{ record.sourceType }})</text>
              <text v-if="record.marblesLost > 0">失去弹珠: {{ record.marblesLost }}颗 (输给{{ record.opponent }})</text>
              <text>获得积分: {{ record.pointsEarned }}</text>
              <text v-if="record.opponent">对手: {{ record.opponent }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalGames: 42,
      winGames: 28,
      totalMarbles: 156,
      highestScore: 980,
      battleRecords: [
        {
          time: '2025-03-28T15:30:00',
          win: true,
          marblesWon: 5,
          marblesLost: 0,
          pointsEarned: 120,
          source: '击败玩家A',
          opponent: '玩家A',
          sourceType: '击败玩家'
        },
        {
          time: '2025-03-28T14:15:00',
          win: false,
          marblesWon: 0,
          marblesLost: 2,
          pointsEarned: 30,
          source: '输给玩家B',
          opponent: '玩家B',
          sourceType: '对战失败'
        }
      ],
    }
  },
  methods: {
    formatTime(timeStr) {
      const date = new Date(timeStr)
      return `${date.getMonth()+1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
    },
    async loadStats() {
      try {
        uni.showLoading({ title: '加载中...' })
        // 使用mock数据
        this.totalGames = 42
        this.winGames = 28
        this.totalMarbles = 156
        this.highestScore = 980
      } catch (error) {
        console.error('获取统计数据失败:', error)
        uni.showToast({ title: '获取数据失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    }
  },
  mounted() {
    this.loadStats()
  }
}
</script>

<style>
.stats-container {
  padding: 30rpx;
  background: #f5f7fa;
}

.header {
  margin-bottom: 40rpx;
  text-align: center;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #4a5568;
  position: relative;
  display: inline-block;
}

.title:after {
  content: '';
  position: absolute;
  bottom: -10rpx;
  left: 0;
  right: 0;
  height: 6rpx;
  background: linear-gradient(90deg, #4299e1, #48bb78);
  border-radius: 3rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.stat-card {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 8rpx 8rpx 15rpx rgba(163,177,198,0.6),
              -8rpx -8rpx 15rpx rgba(255,255,255,0.5);
  text-align: center;
}

.stat-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #4a5568;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 28rpx;
  color: #718096;
}

.section {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 8rpx 8rpx 15rpx rgba(163,177,198,0.6),
              -8rpx -8rpx 15rpx rgba(255,255,255,0.5);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #4a5568;
  margin-bottom: 20rpx;
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.record-item {
  padding: 20rpx;
  background: #f8fafc;
  border-radius: 16rpx;
}

.record-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.record-time {
  font-size: 28rpx;
  color: #718096;
}

.record-result {
  font-size: 28rpx;
  font-weight: bold;
}

.record-result.win {
  color: #48bb78;
}

.record-result.lose {
  color: #e53e3e;
}

.record-details {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  font-size: 26rpx;
  color: #718096;
}
</style>
